<template>
  <diV class="backlog">
    <div class="backlog_head">
      <span class="title">待办事项</span>
    </div>

    <!-- <div v-show="backBtn" class="backBtn">
      <div class="back-left" @click="goBack">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>
    </div> -->

    <div class="table-box">
      <div class="pd30">
        <ul class="checkTab">
          <!-- 这里显示的是   待审核   已通过和   未通过 -->
          <!-- 点击事件的时候 把一整个item作为参数传过去 -->
          <!-- 当current===item.status的时候给他加一个 active  这个类-->
          <li
            v-for="item in tabs"
            :key="item.status"
            v-html="item.label"
            :class="{'active':current===item.status}"
            @click="clickTab(item)"
          ></li>
        </ul>
        <el-table :data="tableData" stripe style="width: 100%" border>
          <!-- tableColumn 会先在  mounted  阶段 挂在好  然后在这里进行 遍历 -->
          <!-- 显示的其实就是   待审核  已通过  为通过下面的表头（企业名称：所在地区。。。。 ） -->
          <template v-for="item in tableColumn">
            <!-- 如果  item.value不等于  ‘opt’ 那就 显示   ，也就是说把tableColumn里面的每一项都循环遍历在上面，当遍历到‘opt’的时候就不让他显示 -->
            <el-table-column
              v-if="item.value!=='opt'"
              :key="item.value"
              :prop="item.value"
              :label="item.label"
              align="center"
            ></el-table-column>
            <!-- 操作部分的代码 -->
            <el-table-column
              :key="item.value"
              v-else-if="item.value=='opt'"
              label="操作"
              align="center"
            >
              <!-- 操作部分的代码  下面的   自定义列表 -->
              <template slot-scope="scope">
                <el-button
                  v-if="status==0"
                  @click="check(scope.row)"
                  type="text"
                  size="small"
                >审核</el-button>
                <el-button
                  v-if="status==1||status==2"
                  @click="check(scope.row)"
                  type="text"
                  size="small"
                >详情</el-button>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>
     <!-- 弹框 -->
    <el-dialog
      :visible.sync="checkFlag"
      width="980px"
      custom-class="jhdialog"
    >
      <checkBox :tabNum=status  @cancelCheck="close"></checkBox>
    </el-dialog>
  </diV>
</template>
<script>
  import checkBox from "./checkBox/checkBox.vue";
  export default{
    components:{
      checkBox
    },
    data(){
      return {
        tabs: [
        { label: "待审核", value: 12, status: "0", index: "0" },
        { label: "已通过", value: 200, status: "1", index: "1" },
        { label: "未通过", value: 5, status: "2", index: "1" }
      ],
      tableData: [
        {
          vipName: "疾风剑豪",
          realName: "沈锦峰",
          peopleNum: "320681199804150650",
          telNum:'13584730396',
          startTime:'12月12日',
        }
      ],
      tableColumn: [
        { label: "会员名称", value: "vipName" },
        { label: "实名姓名", value: "realName" },
        { label: "身份证号码", value: "peopleNum" },
        { label: "手机号码", value: "telNum" },
        { label: "申请时间", value: "startTime" },
        { label: "操作", value: "opt" }
      ],
       current: "0",
       checkFlag:false,
       status:'0'
      }
    },
    methods:{
      clickTab(item) {
        console.log(item);
        this.current = item.status;
        this.status=item.status
      },
      close () {
      this.checkFlag = false;
      },
      check() {
      console.log("111111");
      this.checkFlag=true
    },
    }
  }

</script>
<style scoped>
  .backlog {
  padding: 0 20px;
}

.backlog_head {
  height: 50px;
}

.table-box {
  background: #fff;
  padding: 10px 15px;
}

.title {
  padding: 0;
  font-size: 16px;
  width: 120px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  padding-left: 10px;
  /* border-left: 6px solid #0064e4; */
}


.backBtn {
  background: #fff;
  padding: 0 10px;
  border-bottom: 1px solid #d2d2d2;
  height: 60px;
}

.back-left {
  cursor: pointer;
  padding: 10px 0;
  height: 60px;
  width: 70px;
  display: flex;
  align-items: center;
}

.back-left span {
  color: #a1a1a1;
  padding-left: 4px;
}

.back-left i {
  color: #0064e4;
}
.pd30{
  padding: 30px 0;
}
</style>
